import React from 'react';
import { Button, Icon } from 'antd';
import {WeaTools, WeaDialog, WeaTable, WeaHelpfulTip} from 'ecCom';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

class SynergyParams4Report extends React.Component {
    state = { visible: false, loading: false, data: [] };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onCancel = this.onCancel.bind(this);
    }

    render() {
        const { visible, loading, data } = this.state;

        const columns = [{
            key: 'paramName',
            title: (
                    <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@awe5g2`}>
                        <span className="portal-p4e-am-table-title">{getLabel(386542, '变量名')}</span>
                        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@49x7yu`} style={{marginLeft:'10px'}} title={getLabel(523749, '使用系统变量时，变量名前后需加英文空格')} placement="topRight" />
                    </React.Fragment>
                ),
            dataIndex: 'paramName',
            width: '50%',
        }, {
            key: 'paramShowName',
            title: getLabel(386543, '变量显示名'),
            dataIndex: 'paramShowName',
            width: '25%',
        }, {
            key: 'paramType',
            title: getLabel(386544, '变量类型'),
            dataIndex: 'paramType',
            width: '25%',
        }];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@kd8p1p`}
              visible={visible}
              loading={loading}
              title={getLabel(84027, '图表参数信息')}
              icon="icon-coms-synergism"
              iconBgcolor="#1a57a0"
              style={{ width: 500, height: 460 }}
              hasScroll={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ti69s4`} columns={columns} dataSource={data} pagination={false} />
            </WeaDialog>
        );
    }

    onShow(params = {}) {
        this.setState({ visible: true, loading: true });

        const { hpid = '' } = params;
        WeaTools.callApi('/api/portal/synergy/getReportParams', 'GET', { hpid }).then((data) => {
            this.setState({ loading: false, data: data.data });
        });
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zh7hw0`} type="ghost" onClick={this.onCancel}>{getLabel(309, '关闭')}</Button>);
        return buttons;
    }

    onCancel() {
        this.setState({ visible: false, data: [] });
    }
}

export default SynergyParams4Report;
